<template>
    <div class="perCenter">
        <h4>个人中心</h4>
        <div class="top">
            <div class="topLeft">
                当前头像：</div>
            <el-upload class="avatar-uploader" action="http://shop.bluej.cn/api/update" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

            <!-- <img src="../c7aa26f7bf0d2b97c636b29c3101a03c.jpeg" alt=""> -->
        </div>
        <el-form class="demo-ruleForm center" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
            label-width="100px">
            <el-form-item label="用户名:" prop="name">
                <el-input v-model.number="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="电话:" prop="phone">
                <el-input v-model.number="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { getChangeUser } from "../assets/request.js"
export default {
    name: 'percenter',
    data() {
        var checkName = (rule, value, callback) => {
            setTimeout(() => {
                if (value === '') {
                    callback(new Error('用户名不能为空'));
                } else {
                    callback();
                }
            }, 1000);
        };
        var checkPhone = (rule, value, callback) => {
            setTimeout(() => {
                if (value === '') {
                    callback(new Error('电话不能为空'));
                } else {
                    callback();
                }
            }, 1000);
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            imageUrl: 'http://shops-1251395798.cos.ap-nanjing.myqcloud.com/%E9%BB%98%E8%AE%A4%E9%A1%B9%E7%9B%AE_1/_1666358653451_530804b27f38109a1d5dd289d2696f0d.jpg',
            ruleForm: {
                pass: '1234',
                checkPass: '1234',
                phone: '18339688751',
                name: '动画',
            },
            rules: {
                name: [
                    { validator: checkName, trigger: 'blur' }
                ],
                phone: [
                    { validator: checkPhone, trigger: 'blur' }
                ],
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
            }
        };

    },
    methods: {
        async submitForm(formName) {
            // this.$refs[formName].validate((valid) => {
            //     if (valid) {
            //         alert('修改成功');
            //     } else {
            //         console.log('提交失败，请重新修改');
            //         return false;
            //     }
            // });
            // 在本地存储中拿到用户id
            let id = sessionStorage.getItem("userId")
            let changeuser = await getChangeUser(
                id,
                {
                    name: this.ruleForm.name,
                    password: this.ruleForm.pass,
                    phone: this.ruleForm.phone,
                    header_img: this.imageUrl,
                });
            if (changeuser.status == 200) {
                this.$message({
                    message: '信息修改成功',
                    type: 'success',
                    duration: 800,
                })
            } else {
                this.$message({
                    message: '提交失败，请重新提交',
                    type: 'waring',
                    duration: 1000
                })
            }
            console.log(changeuser);
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 图片上传组件用到的
        handleAvatarSuccess(res, file) {
            this.imageUrl = file.response.result.path;
            // console.log( this.imageUrl);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },
    mounted() {
        let id = sessionStorage.getItem("userId")
        // console.log(this.imageUrl);
    },
}

</script>

<style lang='scss' scoped>
@function vw($w) {
    @return ($w/1349) * 100+vw;
}

.perCenter {
    width: vw(900);

    h4 {
        font-size: vw(30);
        font-weight: 500;
    }

    .top {
        margin: vw(10) 20%;
        display: flex;

        .topLeft {
            font-size: vw(18);
            line-height: vw(150);
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        // img {
        //     width: vw(140);
        //     height: vw(140);
        //     border: 2px solid rgb(185, 179, 169);
        //     border-radius: vw(140);
        // }
    }

    .center {
        width: 45%;
        margin: 0 10%;
    }
}
</style>
